<template>
  <div class="test">
      <ImageLoader @load="loader" :duration="3000" placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"></ImageLoader>
  </div>
</template>

<script>
import ImageLoader from './index.vue';
export default {
    components: { ImageLoader },
    methods:{loader(){
        console.log('结束了')
    }

    }
}

</script>

<style>
.test{
    width: 300px;
    height: 200px;
}
</style><!-- 
    整体思路
    一开始我个人想法是做一个函数，让他们来回切换等加载完成后直接就显示第二章图片，模糊的样式直接使用第三方库animate.css找个样式一搭配就ok'了
    后来我就发现我不会写这这个函数也没有静下心来思考，就看到给两个地址我还以为是一个img原素，甚至想到 用网络传输，接受完成后怎么怎么样。
    其实整体这个思路没有我想的那么难，直接就是两个img原素之间的切换，首先显示好加载占位img，之后等着原图片加载过后在进行展示加载后的图片
    所以说第一个问题怎么样使的两个图片在同一位置展现，
    1定位，找到透明或者上层下层，最后再把占位改变透明或者层级
    2.如何知道加载完成。load'事件这个会在img加载完成后做你给的函数工作，
    3.状态 定义状态，用来更加方便的设置透明加载完成后再把状态改变，
    4.消失，但原图片加载完成后，占位视频就可以消失掉了，那么就需要用到v-if有意思的是它里面false是不消失，true是消失，就真不错
    消失的时间，要在所有的事情完成后在消失，定时器吗，时间就写外部传入的时间，不然就是默认时间，
    5.样式，写了一些公用样式，写样式看能否公用如果可以就要写在外部这样可以省去很多以后的事情，
    6.抛出事件， 也是在所有事情就结束后在给抛出，
    样式像这种图片类一般都是要占满整个父级原素的，
    7.状态转换用的是计算属性，返回出来就是我们的是否透明，-->